<script setup lang="ts">
import { MapItemLink } from '@/map-item'
import { waypointMapItem } from '../../waypoint'
import type { ATSRoute } from '../types'
import { getATSRouteInfo } from './atsroute-info'

const props = defineProps<{
  type: string
  item: ATSRoute
}>()

const info = getATSRouteInfo(props.item)
const lastSeg = info.segmentList[info.segmentList.length - 1]
const lastOSeg = info.oppositeSegmentList[info.oppositeSegmentList.length - 1]
</script>
<template>
  <div class="atsroute-info">
    <div class="pane-block">
      <div class="row">
        <div class="col-4em">航路:</div>
        <div class="col">{{ info.id }}</div>
      </div>
      <div class="row">
        <div class="col-4em">长度:</div>
        <div class="col">{{ info.length / 1000 }}km</div>
      </div>

      <div class="map-block-header">正向航段[{{ info.segmentList.length + 1 }}]</div>
      <div class="row">
        <div class="col-3em">No</div>
        <div class="col-6em">航路点</div>
        <div class="col-8em">长度</div>
        <div class="col-6em">方向</div>
        <div class="col-2em">可用</div>
      </div>
      <div class="row seg-row" v-for="(seg, idx) in info.segmentList" :key="idx">
        <div class="col-3em">{{ idx + 1 }}</div>
        <MapItemLink class="col-6em" :txt="seg.start" :item="waypointMapItem" />
        <div class="col-8em">{{ seg.length / 1000.0 }}km</div>
        <div class="col-6em">{{ Math.floor(seg.course) }}°</div>
        <div class="col-2em">{{ seg.enable ? '是' : '否' }}</div>
      </div>
      <div class="row seg-row">
        <div class="col-3em">{{ info.segmentList.length + 1 }}</div>
        <MapItemLink class="col-6em" :txt="lastSeg.end" :item="waypointMapItem" />
        <div class="col-8em">-</div>
        <div class="col-6em">-</div>
        <div class="col-2em">-</div>
      </div>

      <div class="map-block-header">反向航段[{{ info.oppositeSegmentList.length + 1 }}]</div>
      <div class="row">
        <div class="col-3em">No</div>
        <div class="col-6em">航路点</div>
        <div class="col-8em">长度</div>
        <div class="col-6em">方向</div>
        <div class="col-2em">可用</div>
      </div>
      <div class="row seg-row" v-for="(seg, idx) in info.oppositeSegmentList" :key="idx">
        <div class="col-3em">{{ idx + 1 }}</div>
        <MapItemLink class="col-6em" :txt="seg.start" :item="waypointMapItem" />
        <div class="col-8em">{{ seg.length / 1000.0 }}km</div>
        <div class="col-6em">{{ Math.floor(seg.course) }}°</div>
        <div class="col-2em">{{ seg.enable ? '是' : '否' }}</div>
      </div>
      <div class="row seg-row">
        <div class="col-3em">{{ info.oppositeSegmentList.length + 1 }}</div>
        <MapItemLink class="col-6em" :txt="lastOSeg.end" :item="waypointMapItem" />
        <div class="col-8em">-</div>
        <div class="col-6em">-</div>
        <div class="col-2em">-</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.atsroute-info {
  .seg-row:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
}
</style>
